<template>
	<view style="text-align: center;">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<view>{{ number + 1}}</view>
			<view>{{ ok ? 'YES' : 'NO' }}</view>
			<view>{{ message.split('').reverse().join('')}}</view>
		</view>
		
		<view v-for="item in arr" style="color: #ff0000;">
			{{item}}
		</view>
		
		<view v-for="(item,index) in 6" style="color: #00ff00;">
			<view :class="'list-'+ index%2">{{index +2}}</view>
		</view>
		
		<view v-for="(value,name,index) in object">
			{{index}}.{{name}}.{{value}}
		</view>
		
		<view v-for="item in arr" :key="item.id">
			<view style="color: #333300;">{{item.id}}:{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				number: 1,
				ok: true,
				message: 'Hello Vue',
				arr: [
					{id: 1,name: 'uni-app'},
					{id: 2,name: 'QQ'},
					{id: 3,name: 'wechat'},
					{id: 4,name: 'Bilibili'}],
					
					object: {
						title: 'how to do lists in Vue',
						author: 'fujingyu',
						publishedAt: '2025-09-30'
					}
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
